
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
	<!--
		HUMANIZED MESSAGES 1.0
		idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
		home - http://humanmsg.googlecode.com
	-->

	<title>Humanized Messages - Demo</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="humanmsg.js"></script>
	<link href="humanmsg.css" media="screen" type="text/css" rel="stylesheet">

	<script>
	jQuery(document).ready(function() {
		jQuery('a.showmessage').click(function() {
			humanMsg.displayMsg('<strong>Success:</strong> <span class="indent">You clicked \''+jQuery(this).text()+'\'</span>');
			return false;
		})

		jQuery('a.showmessage:last').click(function() {
			humanMsg.displayMsg('"Your <strong>Earth</strong> will be reduced to a burned-out cinder."');
			return false;
		})
	})
	</script>
	
	<style>
		p.links {
			position: absolute;
			font: 2em Helvetica, Arial, Sans-Serif;
			top: 40%;
			left: 50%;
			width: 400px;
			margin-left: -200px;
			text-align: center;			
		}
		
		p.links a {
			text-decoration: none;
			color: #888;
		}
		
		p.links a:hover {
			color: #222;
		}
		
		p.links a.home {
			font-size: 10px;
			line-height: 30px;
		}
	</style>
</head>

<body>

	<p class="links">
		<a href="#" class="showmessage">Klaatu</a>
		<a href="#" class="showmessage">Barada</a>
		<a href="#" class="showmessage">Nikto</a><br />
		<a href="http://humanmsg.googlecode.com" class="home">Humanized Messages</a>
	</p>

</body>
</html>